<template>
    <div>
        <div class="reason" @click="showSeason">
            <p>退款原因：{{select.item}}</p>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-chevronright"></use>
            </svg>
        </div>
        <van-popup v-model="show" position="bottom">
            <div class="select">
                <h1>退款原因</h1>
                <svg class="icon closeIcon" aria-hidden="true" @click="close">
                    <use xlink:href="#icon-close"></use>
                </svg>
                <ul>
                    <li v-for="(item, index) in reasonList" @click="selected(item,index)">
                        <p>{{item.reason}}</p>
                        <svg :class="[select.index ===index ? 'active' : 'normal' ]" aria-hidden="true">
                            <use xlink:href="#icon-selected"></use>
                        </svg>
                    </li>
                </ul>
            </div>
        </van-popup>
    </div>
</template>

<script type="text/ecmascript-6">
    import API from '../../request/api';

    export default {
        name: 'selectSeason',
        props: {
            reason: {
                type: String
            }
        },
        components: {},
        data() {
            return {
                show: false, // 显示选择原因弹窗
                reasonList: [],// 理由列表
                select: {
                    index: '',
                    item: this.reason
                }, //选择的理由序号
            };
        },
        computed: {
        },
        mounted() {

            this.request.get(API.getReason).then(res => {
                this.reasonList = res;
                this.reasonList.forEach((item,i)=>{
                    if(item.reason === this.reason){
                        this.$set(this.select, 'index', i);
                    }
                });
            }, () => {
            });
        },
        methods: {
            selected(item, i) {
                // 选择的内容（展示信息）和序号(高亮按钮)
                this.select.index = i;
                this.select.item = item.reason;
                this.$emit('reason', this.select.item);
                this.show = false;
            },
            showSeason() {
                this.show = true;
            },
            close() {
                this.show = false;
            }
        },
        watch:{
            reason(val){
                this.select.item = val;
            }
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import '~assets/main.styl';
    .reason {
        margin-top smallMargin
        flex-x();
        height vw(40)
        line-height vw(40)
        padding 0 4vw
        background grayF;
        fill: gray9
        .icon {
            width: vw(12)
            height: vw(12)
            fill: gray9
        }
    }

    .select {
        height: 60vh
        position relative
        .closeIcon {
            position absolute
            right: 2vw
            top: -5vw
            width: vw(12)
            height: vw(12)
            fill: gray9
        }
        h1 {
            font-size vw(18)
            text-align center
            margin vw(35) 0 cellPadding
        }
        ul {
            height: 50vh
            padding 0 cellPadding
            overflow-y auto
        }
        li {
            border-bottom 1px solid grayE
            flex-x();
            p {
                font-size vw(16)
                line-height vw(50)
            }
            .active {
                fill: main-color
                width: vw(20)
                height: vw(20)
            }
            .normal {
                width: vw(20)
                height: vw(20)
                fill: grayE
            }
        }
    }
</style>